import "./App.css";
//导入路由
import React, { Component, lazy, Suspense } from "react";
import { Route, Redirect, Switch } from "react-router-dom";
//定义导航链接
import { NavLink } from "react-router-dom";
//rcc 生成类组件
//rsf 生成函数式组件

//导入组件
var Login = lazy(() => import("./views/Login"));
var Register = lazy(() => import("./views/Register"));
var Index = lazy(() => import("./views/Index"));
var Search = lazy(() => import("./views/Index/Shouye/Search"));
var Xiangqing = lazy(() => import("./views/Xiangqing"));

var City = lazy(() => import("./views/Index/City"));
var Shezhi = lazy(() => import("./views/Shezhi"));
var Dizhi = lazy(() => import("./views/Dizhi"));
var querenDingdan = lazy(() => import("./views/querenDingdan"));
var Car = lazy(() => import("./views/Index/Car"));

class App extends Component {
  render() {
    return (
      <div className="app">
        {/* 定义路由规则 */}

        {/* Switch 包裹的路由规则, 当从上往下匹配到某条路由规则时, 会停止继续匹配其余的路由规则 */}
        {/* Route 定义一条路由规则, path是路由地址, component是路由地址对应的组件 */}
        {/* Redirect 重定向, from是当前路由地址 to重定向后的路由地址 */}
        {/* exact 精确匹配 */}

        {/* Switch 包裹的路由组件,自身用来定义路由规则, 同时也充当占位组件(类似于vue-router中的router-view) */}
        <Suspense fallback={<div className="loading">loading.......</div>}>
          <Switch>
            <Route path="/index" component={Index} />
            {/* 主页面 */}
            <Route exact path="/login" component={Login} />
            {/* 登陆页面 */}
            <Route exact path="/register" component={Register} />
            {/* 注册页面 */}
            <Route exact path="/Search" component={Search} />
            {/* 搜索页面 */}
            <Route exact path="/Xiangqing" component={Xiangqing} />
            {/* 详情页面 */}
            <Route exact path="/City" component={City} />
            {/* 选择城市页面 */}
            <Route exact path="/Shezhi" component={Shezhi} />
            {/* 设置页面 */}
            <Route exact path="/Dizhi" component={Dizhi} />
            {/* 地址界面 */}
            <Route exact path="/Car" component={Car} />

            <Route exact path="/querenDingdan" component={querenDingdan} />
            {/* 确认订单界面 */}
            <Redirect exact from="/" to="/index" />
          </Switch>
        </Suspense>
      </div>
    );
  }
}

export default App;
